<!--课程9宫格分类-->
<template>
  <div
    class="ninepalacegrid-comp"
    :style="{ marginTop: top ,'padding-left': paddingLeftRight,'padding-right': paddingLeftRight}"
  >
    <div class="ninepalace-grid-content">
      <cell-title
        v-if="isShowModuleName"
        :title="moduleName"
        :option="option"
        :hide-desc="option.isMore ==='2'"
        :style="{
          'background-color': option.backgroundColor,
          'border-radius':
            radiusSize + ' ' +radiusSize + ' 0 0'
        }"
      />
      <div
        class="learn-main"
        :class="{ all: isShowModuleName || showMore }"
        :style="{
          'padding-left': spacing,
          'padding-right': spacing,
          height: height,
        }"
      >
        <img :src="imgBg" alt="" class="bg-img">
        <div
          class="learn-content"
          :style="{
            'margin-left': margins,
            'margin-right': margins,
            'margin-top': marginsWithin,
            'margin-bottom': marginsWithin,
            'padding-left': spacing,
            'padding-right': spacing,
          }"
        >
          <div
            v-for="(item, i) in list"
            :key="i"
            class="learn-item"
          >
            {{ item.classifyName }}
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import mixins from './../mixins'
import mixin from './mixins'
import CellTitle from '@/components/CustomPage/apps/widget/characters/cellTitle'
export default {
  name: 'NinePalaceGrid',
  components: {
    CellTitle
  },
  mixins: [mixins, mixin],
  props: {
    option: {
      type: Object,
      default: () => ({})
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      defaultList: [
        {
          classifyName: '内容一'
        },
        {
          classifyName: '内容二'
        },
        {
          classifyName: '内容三'
        },
        {
          classifyName: '内容四'
        },
        {
          classifyName: '内容五'
        },
        {
          classifyName: '内容六'
        },
        {
          classifyName: '内容七'
        },
        {
          classifyName: '内容八'
        },
        {
          classifyName: '内容九'
        }
      ],
      list: []
    }
  },
  async created() {
    if (this.isInitData) {
      await this.initData()
    } else {
      this.list = this.defaultList
    }
  },
  methods: {
    /**
     * 用于initData方法调用完设置数据
     */
    setData(result) {
      this.list = JSON.parse(result?.dataList?.data.configValue) || []
    }
  }
}
</script>
<style type="text/scss" lang="scss">
@import '@/styles/utility/rem.scss';

.ninepalacegrid-comp {
  position: relative;
  width: rem(750);

  .ninepalace-grid-content {
    border-radius: rem(16);
    background-color: #fff;
    padding-bottom: rem(24);

    .moduleName-box {
      display: flex;
      height: rem(88);
      justify-content: space-between;
      width: 100%;
      align-items: center;

      &.padding {
        padding: rem(23);
      }

      .moduleName {
        color: #222;
        font-weight: bold;
        font-size: rem(32);
      }

      .more {
        color: #999999;
        font-size: rem(24);
      }
    }

    .learn-main {
      width: 100%;
      height: rem(386);
      position: relative;

      .bg-img {
        width: 100%;
        height: 100%;
        position: relative;
      }

      .learn-content {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        height: 100%;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        right: 0;

        .learn-item {
          flex: 0 0 33.33%;
          padding: rem(10);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: rem(32);
          font-weight: bold;
          color: #ffffff;
          text-align: center;
        }
      }
    }
  }

}
</style>
